Skip to main content

Pageflow – App State Events

The App State Events node in Digisquares Pageflow lets you respond to changes in global application state—theme toggles, locale updates, user data modifications, or error notifications. Use this node when you need your flow to react whenever a shared, application-wide variable changes, ensuring consistent behavior across all pages.

1. Opening the App State Events Palette​

  1. On your Pageflow canvas, hover over the node under which you want the trigger to appear.
  2. Click the + button to open the Actions palette.
  3. Select App State Events from the list.
CategoryDescription
PageTriggerRoot category for all pageflow triggers.
Page EventsEvents tied to the overall page (load, unload, scroll).
Control EventsUser interactions on UI elements (click, focus, hover).
App State EventsLinked to global application state changes: theme, locale, user data updates, or system errors.
Page State EventsChanges in page-specific data (load/update/error).

2. Configuring an App State Events Node​

After selecting App State Events, a modal appears with a single dropdown:

───────────────────────────────────────────
│ App State Events                        │ ✕ │
├─────────────────────────────────────────┤
│ Select Variable  [ ▾ Result          ] │
├─────────────────────────────────────────┤
│                      [ OK ] [ Cancel ] │
───────────────────────────────────────────

2.1 Select Variable​

  • Purpose: Choose the global variable you want to monitor.

  • Options: All variables defined under the Global Variables scope. Examples in the screenshot include:

    • Get Value
    • Get Height
    • Data
    • Result

Note: Only variables in the Global Variables panel will be listed here. Make sure required globals are defined in the Data module.

3. Saving & Wiring Your App State Event​

  1. Select the desired variable from the dropdown.
  2. Click OK to insert the App State Events node into your flow.
  3. Hover over the new node to reveal ✏️ (edit) and 🗑️ (delete) icons for adjustments.
  4. Attach downstream nodes—such as Data Actions, UI Actions, or Subflows—to execute logic when the variable changes.

4. Example: Reacting to a Theme Change​

  1. Global Variable: theme
  2. App State Events Node: Monitors theme changes.
  3. Child Node: UI Action → ApplyTheme(theme) to switch component styles.
Page Events
 └─ App State Events: [theme]
     └─ UI Action: ApplyTheme(theme)

6. Summary​

The App State Events node empowers your Pageflow to automatically adapt when key application-wide variables change. By centralizing these reactions, you maintain consistent, predictable behavior across all pages. Next up: explore Page State Events for page-specific data triggers.